<template>
    <div class="news-detail">
        <div class="news-detail-content">
            <div class="xzzx-box-content-item-title">
                <strong>{{ currentNews.title }}</strong>
            </div>
            <el-divider content-position="center">
                <div class="line"></div>
            </el-divider>
            <div class="news-detail-content-date">
                <span>{{ currentNews.date }}</span>
            </div>
            <div class="news-detail-content-body">
                <p v-html="currentNews.content" style="white-space: pre-wrap; "></p>
            </div>
            <div class="news-detail-content-img">
                <template v-if="currentNews.imageList && currentNews.imageList.length > 0"
                    v-for="(item, index) in currentNews.imageList" :key="index">
                    <img :src="item" alt="新闻图片" class="img">
                </template>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { useRoute } from 'vue-router';
import { newsDetail } from '@/api/rjxt'

const route = useRoute();
const currentNews = ref({});

onMounted(() => {
    newsDetail({
        id: route.params.id
    }).then(res => {
        currentNews.value = res.data
    });
});
</script>

<style scoped>
.img {
    margin: 30px auto;
}

/* 媒体查询 手机 */
@media (max-width: 768px) {
    .news-detail-content-img {
        margin: 20px auto;
    }

    .xzzx-box-content-item-title {
        font-size: 34px;
        line-height: 1.75;
        color: #3366cc;
        text-align: center;
        margin-top: 50px;
    }

    .line {
        display: block;
        margin: 0;
        margin-top: -0;
        padding: 0;
        top: 50%;
        width: 79px;
        height: 1px;
        font-size: 0;
        border-bottom-width: 3px;
        border-bottom-style: solid;
        border-bottom-color: #3d85c6;
        -moz-box-shadow: 0 0 0 transparent;
        -webkit-box-shadow: 0 0 0 transparent;
        -ms-box-shadow: 0 0 0 transparent;
        -o-box-shadow: 0 0 0 transparent;
        box-shadow: 0 0 0 transparent;
    }

    .news-detail {
        display: flex;
        flex-direction: column;
        align-content: center;
        justify-content: center;
        align-items: center;
        margin-top: 70px;
    }

    .news-detail-banner img {
        width: 100%;
        height: auto;
        border-radius: 8px;
    }

    .news-detail-content {
        padding: 0 50px;
    }

    .news-detail-content-title {
        font-size: 24px;
        margin-bottom: 10px;
        color: #333;
        margin-left: 15px;
    }

    .news-detail-content-date {
        font-size: 14px;
        color: #999;
        margin-bottom: 20px;
        margin-left: 15px;
    }

    .news-detail-content-body {
        font-size: 16px;
        line-height: 1.6;
        color: #555;
        margin-left: 15px;
        margin-right: 15px;
    }
}

/* 媒体查询 平板 */
@media (min-width: 769px) and (max-width: 1024px) {

    .news-detail-content-img {
        margin: 20px auto;
    }

    .xzzx-box-content-item-title {
        font-size: 34px;
        line-height: 1.75;
        color: #3366cc;
        text-align: center;
        margin-top: 50px;
    }

    .line {
        display: block;
        margin: 0;
        margin-top: -0;
        padding: 0;
        top: 50%;
        width: 79px;
        height: 1px;
        font-size: 0;
        border-bottom-width: 3px;
        border-bottom-style: solid;
        border-bottom-color: #3d85c6;
        -moz-box-shadow: 0 0 0 transparent;
        -webkit-box-shadow: 0 0 0 transparent;
        -ms-box-shadow: 0 0 0 transparent;
        -o-box-shadow: 0 0 0 transparent;
        box-shadow: 0 0 0 transparent;
    }

    .news-detail {
        display: flex;
        flex-direction: column;
        align-content: center;
        justify-content: center;
        align-items: center;
        margin-top: 70px;
    }

    .news-detail-banner img {
        width: 100%;
        height: auto;
        border-radius: 8px;
    }

    .news-detail-content {
        padding: 0 100px;
    }

    .news-detail-content-title {
        font-size: 24px;
        margin-bottom: 10px;
        color: #333;
        margin-left: 65px;
    }

    .news-detail-content-date {
        font-size: 14px;
        color: #999;
        margin-bottom: 20px;
        margin-left: 65px;
    }

    .news-detail-content-body {
        font-size: 16px;
        line-height: 1.6;
        color: #555;
        margin: auto 65px;
    }
}

/* 媒体查询 电脑 */
@media (min-width: 1025px) {
    .news-detail-content-img {
        margin: 20px auto;
    }

    .xzzx-box-content-item-title {
        font-size: 34px;
        line-height: 1.75;
        color: #3366cc;
        text-align: center;
        margin-top: 50px;
    }

    .line {
        display: block;
        margin: 0;
        margin-top: -0;
        padding: 0;
        top: 50%;
        width: 79px;
        height: 1px;
        font-size: 0;
        border-bottom-width: 3px;
        border-bottom-style: solid;
        border-bottom-color: #3d85c6;
        -moz-box-shadow: 0 0 0 transparent;
        -webkit-box-shadow: 0 0 0 transparent;
        -ms-box-shadow: 0 0 0 transparent;
        -o-box-shadow: 0 0 0 transparent;
        box-shadow: 0 0 0 transparent;
    }

    .news-detail {
        display: flex;
        flex-direction: column;
        align-content: center;
        justify-content: center;
        align-items: center;
        margin-top: 70px;
    }

    .news-detail-banner img {
        width: 100%;
        height: auto;
        border-radius: 8px;
    }

    .news-detail-content {
        padding: 0 150px;
    }

    .news-detail-content-title {
        font-size: 24px;
        margin-bottom: 10px;
        color: #333;
    }

    .news-detail-content-date {
        font-size: 14px;
        color: #999;
        margin-bottom: 20px;
    }

    .news-detail-content-body {
        font-size: 16px;
        line-height: 1.6;
        color: #555;
    }
}
</style>